<template>
    <div class="game_winningMessage">
        <ul ref="message">
            <li v-for="(todo, i) in list" class="game_winningList" :key="i" v-html="todo.text"></li>
        </ul>
    </div>
</template>

<script>
import $ from "jquery"

export default {
    props:{
        winning: Object,
        list: Array
    },
    data(){
        return {
            status: false, // 是否监听后续添加
            key: 0,
            watchStatus: false
        }
    },
    methods:{
        animate(){// 将第二个消息推进，第一个消息推出，并删除最前面
            if(this.key == this.list.length -1 ){
                this.status = true;
                this.watchStatus = false;
                return;
            }
            this.status = false;
            setTimeout(() => {
                // this.list[this.key].left = -1.92;
                $(".game_winningMessage li").eq(this.key).animate({ left: -this.boxWidth }, 1500)
                $(".game_winningMessage li").eq(this.key+1).animate( {left: 0 }, 1500)
                // this.list[this.key+1].left = 0;
                setTimeout(() => {
                    this.key += 1;
                    this.start();
                }, 2000);
            }, 30);
        },
        start(){// 开始函数，轮查message
            /* if(parseInt(document.getElementsByClassName("game_winningList")[this.key].style.left) != 0){
                setTimeout(() => {
                    this.start();
                }, 500);
                return;
            } */

            setTimeout(()=>{
                this.list.length == 1? (this.status = true, this.watchStatus = false) : this.animate();
            }, 3000)
        }
    },
    watch:{
        list(){// 监听，如果3秒内没新内容退， 则收到新消息，立即推出
            if(!this.status || this.watchStatus){
                return;
            }
            this.watchStatus = true;
            this.animate();
        }
    },
    mounted(){
        console.log( window.getComputedStyle(this.$refs.message).width )
        this.boxWidth = parseInt(window.getComputedStyle(this.$refs.message).width);
        this.start();
    }
}
</script>
<style>
.game_winningMessage{position: fixed; left: 50%; top: 0.04rem; width: 65%; height: 0.36rem; background: url(../public/images/game_winningMessage.png) no-repeat; background-size: 100% 0.36rem; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);}
.game_winningMessage ul{position: relative; width: 1.92rem; height: 0.14rem; margin:0.11rem 0 0 0.08rem; overflow: hidden;}
.game_winningMessage li{position: absolute; left: 1.92rem; top: 0; width: 100%; height: 100%; line-height: 0.12rem; /* transition: 1.5s linear; -webkit-transition: 1.5s linear; */ text-align: center; font-size: 0.1rem;}
.game_winningMessage em{color: #c90600;}
.game_winningMessage span{ max-width: 0.8rem; text-overflow:ellipsis; white-space: nowrap;}
.game_winningMessage span, .game_winningMessage i{display: inline-block; overflow: hidden; position: relative; top: 8%;} 
.game_winningMessage li:before{content: ""; display: inline-block; margin-right: 0.03rem; width: 0.1rem; height: 0.08rem; background: url(../public/images/game_winningMessageIcon.png) no-repeat; background-size:100%;}
.game_winningMessage li:nth-of-type(1){left: 0;}
</style>

